<template>
  <div id='app'>
      <!-- <h3>签到</h3> -->
      <RouterTo :title="title"></RouterTo>
      <div class="sign-header">
          <p>您的可用积分为</p>
          <p>0</p>

      </div>
      <div class="sign-section">
      </div>
      <div class="sign-section-next">
          <p>签到</p>
      </div>

      <div class="sign-footer">
          <p><img src="/11.jpg" alt=""></p>
          <p>
              <span>消费购物</span>
              <span>购物完成，确认收货后立返积分</span>
          </p>
          <p>
              <span @click="goShopping">去购物</span>
          </p>
      </div>


       <div class="sign-footer">
          <p><img src="/22.jpg" alt=""></p>
          <p>
              <span>积分兑换</span>
              <span>积分兑好礼，20积分即可兑换礼券</span>
          </p>
          <p>
              <span @click="ToChange">去兑换</span>
          </p>
      </div>

  </div>
</template>

<script>
import RouterTo from '../../components/hedaerTO/routerTo'
export default {
  data () {
    return {
      list: [],
      title:'‏‎‍‍‌‌‪'
    }
  },
  methods: {
      goShopping(){
          this.$router.push(this.$routerConfig.home.path)
      },
      ToChange(){
          this.$router.push(this.$routerConfig.gift.path)

      }

  },
  mounted() {

  },
  components: {
RouterTo
  }
}
</script>

<style lang='scss'>
.sign-footer{
    width: 95%;
    height: 110px;
    margin-left: 2.5%;
    background-color: #F4EBE2;
    margin-top: 3vh;
    border-radius:10px ;
    color: #e1b68c;
    display: flex;
    p:nth-child(1){
        width: 25%;
            height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p:nth-child(2){
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 12px;
        
        span{
            display: block;
        }
    }

    p:nth-child(3){
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            display: block;
            color: white;
            width: 80px;
            height: 30px;
            border: 1px solid #ccc;
            display: flex;
    background: #e1b68c;
justify-content: center;
align-items: center;
border-radius:10px ;
 display: flex;
        justify-content: center;
        align-items: center;
        }

        
    }

}
.sign-header{
    width: 100vw;
    height: 33.51vh;
    background-color:#f1ead8 ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
p:nth-child(1){
        font-size: 18px;
    color: #AEAEAB;

}
p:nth-child(2){
    font-size: 24px;
    font-weight: 700;
    color: #b3a078;
}

}
.sign-section{
     width: 100vw;
    height: 9.75vh;
    background-color:#E8E1CF ;
}
.sign-section-next{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    p{
        width: 170px;
        height: 40px;
        border: 1px solid #ccc;
        background: #B3A078;
        color: white;
        border-radius:10px ;
          display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;

    }


}

</style>
